<template>
  <dv-border-box-12 class="LinechartBox">
    <div class="d-flex pt-2 pl-2" style="height: 10%">
      <div class="d-flex">
        <span><i class="iconfont icon-chart-area" /></span>
        <span class="mx-2" style="font-style: 18px">{{ title }}</span>
      </div>
    </div>
    <!-- 使用动态生成的唯一 id -->
    <div class="d-flex jc-center chart-container">
      <div :id="chartId" class="chart"></div>
    </div>
  </dv-border-box-12>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  ref,
  watch,
  PropType,
  nextTick,
} from "vue";
// 引入 ECharts 库
import * as echarts from "echarts";

// 定义图表数据类型
interface ChartData {
  xAxisData: string[];
  seriesData: {
    name: string;
    type: string;
    data: number[];
    barWidth: string;
    barGap: string;
  }[];
  legendData: string[];
}

export default defineComponent({
  props: {
    title: {
      type: String,
      default: "",
    },
    PieIndex: {
      type: Number,
      default: 0,
    },
    chartData: {
      type: Object as PropType<ChartData>,
      default: () => ({
        xAxisData: [],
        seriesData: [],
        legendData: [],
      }),
    },
  },
  setup(props) {
    // 生成唯一的 chartId
    const chartId = ref(
      `line-chart-${Math.random().toString(36).substr(2, 9)}`
    );

    const initChart = () => {
      const chartDom = document.getElementById(chartId.value);
      if (chartDom) {
        const myChart = echarts.init(chartDom);
        const option = {
          // 设置全局文本颜色为白色
          textStyle: {
            color: "#fff",
            fontSize: 15,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
            textStyle: {
              color: "#fff",
            },
            // 显示实际值
            formatter: function (params: any[]) {
              let result = `<div style="color:#fff;">${params[0].axisValueLabel}</div>`;
              params.forEach((item) => {
                result += `<div style="color:${item.color};">${item.seriesName}: ${item.value}</div>`;
              });
              return result;
            },
          },
          legend: {
            data: props.chartData.legendData,
            textStyle: {
              color: "#fff",
            },
            top: "0%",
            itemHeight: 10,
            itemWidth: 10,
          },
          grid: {
            left: "1%",
            right: "1%",
            bottom: "5%",
            top: "15%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: props.chartData.xAxisData,
            axisLabel: {
              color: "#fff",
              fontSize: 15,
              interval: 0,
            },
          },
          yAxis: {
            type: "value",
            axisLabel: {
              color: "#fff",
            },
          },
          series: props.chartData.seriesData,
        };

        myChart.setOption(option);

        // 监听窗口大小变化，重新绘制图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    };

    onMounted(() => {
      // 确保DOM已渲染
      nextTick(() => {
        initChart();
      });
    });

    // 监听数据变化，重新绘制图表
    watch(
      [() => props.PieIndex, () => props.chartData],
      () => {
        initChart();
      },
      { deep: true }
    );

    return {
      chartId,
    };
  },
});
</script>

<style scoped>
.LinechartBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.chart-container {
  width: 99.2%;
  padding-top: 20px;
  display: flex;
  justify-content: center;
  margin: 0px auto;
}

.chart {
  width: 99%;
  height: 185px;
}
</style>